<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>工具链 | fengrixin</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <script>
         (function(){
            var html = document.createElement('script');
            html.src = 'https://www.googletagmanager.com/gtag/js?id=UA-166891571-1';
            var script = document.getElementsByTagName('script')[0]'
            script.parentNode.insertBefore(html, script);
            
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments)}
            gtag('js', new Date());
            gtag('config', 'UA-166891571-1');
         })();
        </script>
    <meta name="description" content="I don't know anything with certainty, but seeing the stars makes me dream.">
    <meta name="keywords" content="冯日新, fengrixin, rixin, 飘渺云轩">
    <meta name="author" content="rixin, s2675563468, fengrixin@yeah.net">
    <meta name="copyright" content="rixin">
    <meta name="renderer" content="webkit">
    
    <link rel="preload" href="/assets/css/0.styles.52cdc27a.css" as="style"><link rel="preload" href="/assets/js/app.0696c23a.js" as="script"><link rel="preload" href="/assets/js/2.96f039f8.js" as="script"><link rel="preload" href="/assets/js/23.ec5c07a5.js" as="script"><link rel="prefetch" href="/assets/js/10.473b7d15.js"><link rel="prefetch" href="/assets/js/11.0c193dec.js"><link rel="prefetch" href="/assets/js/12.c4d9d484.js"><link rel="prefetch" href="/assets/js/13.dce50cfa.js"><link rel="prefetch" href="/assets/js/14.eecb5cc3.js"><link rel="prefetch" href="/assets/js/15.e0473034.js"><link rel="prefetch" href="/assets/js/16.25b14741.js"><link rel="prefetch" href="/assets/js/17.c016c8f3.js"><link rel="prefetch" href="/assets/js/18.71195568.js"><link rel="prefetch" href="/assets/js/19.1dfd44c0.js"><link rel="prefetch" href="/assets/js/20.abde37ca.js"><link rel="prefetch" href="/assets/js/21.af59917b.js"><link rel="prefetch" href="/assets/js/22.d2f7b52b.js"><link rel="prefetch" href="/assets/js/24.eae97f7d.js"><link rel="prefetch" href="/assets/js/25.2f09818a.js"><link rel="prefetch" href="/assets/js/26.7ae2d77c.js"><link rel="prefetch" href="/assets/js/27.a3963c70.js"><link rel="prefetch" href="/assets/js/28.eadcc4e5.js"><link rel="prefetch" href="/assets/js/29.61cf8d1d.js"><link rel="prefetch" href="/assets/js/3.dd8204a7.js"><link rel="prefetch" href="/assets/js/30.7db889fa.js"><link rel="prefetch" href="/assets/js/31.fb075f3c.js"><link rel="prefetch" href="/assets/js/4.cf123337.js"><link rel="prefetch" href="/assets/js/5.abe0fc83.js"><link rel="prefetch" href="/assets/js/6.d9ded6eb.js"><link rel="prefetch" href="/assets/js/7.a054e416.js"><link rel="prefetch" href="/assets/js/8.f0b3a07f.js"><link rel="prefetch" href="/assets/js/9.f6495dca.js">
    <link rel="stylesheet" href="/assets/css/0.styles.52cdc27a.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">fengrixin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="地基" class="dropdown-title"><span class="title">地基</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/algorithm/" class="nav-link">数据结构和算法</a></li><li class="dropdown-item"><!----> <a href="/learn/browser/" class="nav-link">浏览器工作原理</a></li><li class="dropdown-item"><!----> <a href="/learn/js/es6.html" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/learn/css/" class="nav-link">CSS</a></li><li class="dropdown-item"><!----> <a href="/learn/html/" class="nav-link">HTML</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="楼层" class="dropdown-title"><span class="title">楼层</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/vue/" class="nav-link">Vue</a></li><li class="dropdown-item"><!----> <a href="/learn/node/" class="nav-link">Node.js</a></li><li class="dropdown-item"><!----> <a href="/learn/mini/index.html" class="nav-link">小程序</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="电梯" class="dropdown-title"><span class="title">电梯</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/tools/chain.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">工具链</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/publish.html" class="nav-link">发布系统</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/monitor.html" class="nav-link">监控系统</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="看一看" class="dropdown-title"><span class="title">看一看</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>仓库</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/watch/repository.html" class="nav-link">第三方库</a></li><li class="dropdown-subitem"><a href="/watch/website.html" class="nav-link">好玩的网站</a></li><li class="dropdown-subitem"><a href="/watch/article.html" class="nav-link">牛掰的文章</a></li><li class="dropdown-subitem"><a href="/watch/plugin.html" class="nav-link">扩展&amp;插件</a></li></ul></li><li class="dropdown-item"><h4>作品</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="http://www.5you.com/apk/384161.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微冷知识
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://github.com/fengrixin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="地基" class="dropdown-title"><span class="title">地基</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/algorithm/" class="nav-link">数据结构和算法</a></li><li class="dropdown-item"><!----> <a href="/learn/browser/" class="nav-link">浏览器工作原理</a></li><li class="dropdown-item"><!----> <a href="/learn/js/es6.html" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/learn/css/" class="nav-link">CSS</a></li><li class="dropdown-item"><!----> <a href="/learn/html/" class="nav-link">HTML</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="楼层" class="dropdown-title"><span class="title">楼层</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/vue/" class="nav-link">Vue</a></li><li class="dropdown-item"><!----> <a href="/learn/node/" class="nav-link">Node.js</a></li><li class="dropdown-item"><!----> <a href="/learn/mini/index.html" class="nav-link">小程序</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="电梯" class="dropdown-title"><span class="title">电梯</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/tools/chain.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">工具链</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/publish.html" class="nav-link">发布系统</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/monitor.html" class="nav-link">监控系统</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="看一看" class="dropdown-title"><span class="title">看一看</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>仓库</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/watch/repository.html" class="nav-link">第三方库</a></li><li class="dropdown-subitem"><a href="/watch/website.html" class="nav-link">好玩的网站</a></li><li class="dropdown-subitem"><a href="/watch/article.html" class="nav-link">牛掰的文章</a></li><li class="dropdown-subitem"><a href="/watch/plugin.html" class="nav-link">扩展&amp;插件</a></li></ul></li><li class="dropdown-item"><h4>作品</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="http://www.5you.com/apk/384161.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微冷知识
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://github.com/fengrixin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/learn/tools/chain.html" aria-current="page" class="active sidebar-link">工具链</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#构建打包工具" class="sidebar-link">构建打包工具</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#前端代码为何要进行构建和打包" class="sidebar-link">前端代码为何要进行构建和打包？</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#webpack" class="sidebar-link">Webpack</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#module-chunk-bundle-分别是什么意思-有何区别" class="sidebar-link">module chunk bundle 分别是什么意思，有何区别？</a></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#loader-和-plugin-的区别" class="sidebar-link">loader 和 plugin 的区别？</a></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#webpack-如何实现懒加载" class="sidebar-link">webpack 如何实现懒加载？</a></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#webpack-常见的性能优化" class="sidebar-link">webpack 常见的性能优化？</a></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#babel-runtime-和-babel-polyfill-的区别" class="sidebar-link">babel-runtime 和 babel-polyfill 的区别？</a></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#为何-proxy-不能被-polyfill" class="sidebar-link">为何 Proxy 不能被 Polyfill？</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#gulp" class="sidebar-link">Gulp</a></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#rollup" class="sidebar-link">Rollup</a></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#脚手架生成器" class="sidebar-link">脚手架生成器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#yeoman" class="sidebar-link">Yeoman</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#单元测试工具" class="sidebar-link">单元测试工具</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#mocha" class="sidebar-link">Mocha</a></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#jest" class="sidebar-link">Jest</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/tools/chain.html#持续集成" class="sidebar-link">持续集成</a></li></ul></li><li><a href="/learn/tools/publish.html" class="sidebar-link">发布系统</a></li><li><a href="/learn/tools/monitor.html" class="sidebar-link">监控系统</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="构建打包工具"><a href="#构建打包工具" class="header-anchor">#</a> 构建打包工具</h2> <h3 id="前端代码为何要进行构建和打包"><a href="#前端代码为何要进行构建和打包" class="header-anchor">#</a> 前端代码为何要进行构建和打包？</h3> <ul><li>代码体积更小（Tree-Shaking、压缩、合并），加载更快</li> <li>可以使用高级语言或语法（TS、ES6+、模块化、Scss）</li> <li>兼容性更好，错误检查提示（Polyfill、postcss、eslint）</li> <li>统一、高效的开发环境，统一的构建流程和产出标准</li> <li>集成公司构建规范（提测、上线等）</li></ul> <h2 id="webpack"><a href="#webpack" class="header-anchor">#</a> Webpack</h2> <h3 id="module-chunk-bundle-分别是什么意思-有何区别"><a href="#module-chunk-bundle-分别是什么意思-有何区别" class="header-anchor">#</a> module chunk bundle 分别是什么意思，有何区别？</h3> <ul><li>module：各个源码文件，webpack 中一切皆模块</li> <li>chunk：多模块合并成的，如 entry import() splitChunk</li> <li>bundle：最终输出的文件</li></ul> <h3 id="loader-和-plugin-的区别"><a href="#loader-和-plugin-的区别" class="header-anchor">#</a> loader 和 plugin 的区别？</h3> <ul><li>loader：模块转换器，如 less-&gt; css</li> <li>plugin：扩展插件，如 HtmlWebpackPlugin</li></ul> <h3 id="webpack-如何实现懒加载"><a href="#webpack-如何实现懒加载" class="header-anchor">#</a> webpack 如何实现懒加载？</h3> <p>import() 结合 Vue/React 的异步组件/路由</p> <h3 id="webpack-常见的性能优化"><a href="#webpack-常见的性能优化" class="header-anchor">#</a> webpack 常见的性能优化？</h3> <h3 id="babel-runtime-和-babel-polyfill-的区别"><a href="#babel-runtime-和-babel-polyfill-的区别" class="header-anchor">#</a> babel-runtime 和 babel-polyfill 的区别？</h3> <ul><li>babel-polyfill 会污染全局</li> <li>babel-runtime 不会污染全局</li></ul> <p>因此在做第三方 lib 的时候要用 babel-runtime</p> <h3 id="为何-proxy-不能被-polyfill"><a href="#为何-proxy-不能被-polyfill" class="header-anchor">#</a> 为何 Proxy 不能被 Polyfill？</h3> <p>Polyfill 是使用 ECMA 低版本的语法实现出高版本的语法</p> <p>比如：class 可以用 function 来模拟，Promise 可以用 callback 来模拟</p> <p>但 Proxy 无法用 Object.defineProperty 来模拟出</p> <h2 id="gulp"><a href="#gulp" class="header-anchor">#</a> Gulp</h2> <h2 id="rollup"><a href="#rollup" class="header-anchor">#</a> Rollup</h2> <h2 id="脚手架生成器"><a href="#脚手架生成器" class="header-anchor">#</a> 脚手架生成器</h2> <h3 id="yeoman"><a href="#yeoman" class="header-anchor">#</a> Yeoman</h3> <h2 id="单元测试工具"><a href="#单元测试工具" class="header-anchor">#</a> 单元测试工具</h2> <h3 id="mocha"><a href="#mocha" class="header-anchor">#</a> Mocha</h3> <h3 id="jest"><a href="#jest" class="header-anchor">#</a> Jest</h3> <h2 id="持续集成"><a href="#持续集成" class="header-anchor">#</a> 持续集成</h2></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">3/10/2021, 5:37:35 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/learn/tools/publish.html">发布系统</a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.0696c23a.js" defer></script><script src="/assets/js/2.96f039f8.js" defer></script><script src="/assets/js/23.ec5c07a5.js" defer></script>
  </body>
</html>
